<template>
	<div class="me_containers">
		<top_bg>
			<template v-slot:title>
				<p>{{title}}</p>
			</template>
		</top_bg>
		<div class="me_container">
			<!-- <van-button @click="myLogin">登录信息显示</van-button> -->
			<img src="../../assets/user_head.png" class="user_head_icon" />
			<!-- <img src="../../assets/user_add.png" class="user_add_icon" /> -->
			<div class="user_desc">
				<p>{{firstName}}-{{phone}}</p>
				<p>{{ucenterid}}</p>
				<!-- <p>{{phone}}</p> -->
			</div>

			<div class="user_email">
				{{email}}
			</div>

		<!-- 	<div class="user_money_infos">
				<div class="user_money_info">
					<p class="user_money_info_text1">Wallet Balance</p>
					<p class="user_money_info_text1">AED2,352.00</p>
				</div>
				<van-button class="user_money_info_btn" round color="#417BF8" style="size: 120px;">Top-up</van-button>

			</div> -->

			<div class="user_money_info3">
			</div>
		</div>

		<van-cell-group class="me_container2">

			<van-cell center title="Purchased" is-link to="purchase_prize" class="me_container2_item">
				<template #icon>
					<van-icon class="purchased-icon" />
				</template>
			</van-cell>

			<!-- <van-cell center title="Language" is-link class="me_container2_item" @click="language"> -->
				<!-- <image class='language-icon' src='../../assets/language.png' slot="icon"></image> -->
			<!-- 	<template #icon>
					<van-icon class="language-icon" />
				</template>
			</van-cell> -->
			<van-cell center title="AddressInformation" is-link to="address_admin" class="me_container3_item">
				<!-- <image class='language-icon' src='../../assets/language.png' slot="icon"></image> -->
				<template #icon>
					<van-icon class="address-icon" />
				</template>
			</van-cell>

			<!-- 	<van-cell  center title="自定义左侧图标" is-link class="container-item">
				<image class='mine_headicon' src='../../assets/logo.png' slot="icon"></image>
			</van-cell> -->
			<!--      <van-cell icon="gift-o" title="我收到的礼物" is-link /> -->
		</van-cell-group>

		<!-- 底部导航 -->
		<footer_nav />
	</div>


</template>

<script>
	import {
		showToast
	} from 'vant';


	// import {authClickHandler}   from '../../auth.js'
	import {login} from '../../util.js'
	
	export default {
		data() {
			return {
				title: "Profile",
				email:"",
				phone:"",
				firstName:"",
				lastName:"",
				avatar:"",
				ucenterid:"",
			}
		},
		mounted() {
			// let script2 = document.createElement('script');
			// script2.type = 'text/javascript';
			// // script.src = '../../auth.js';
			// script2.src='https://cdn-web-sg.botim.me/upd/v1/mp/package/framework/35.0.0/framework.universal-35.0.0.js';
			// // script.src = 'https://cdn-web-sg.botim.me/upd/v1/mp/package/framework/30.0.0/framework.universal-30.0.0.js';
			// document.body.appendChild(script2);

			// let script = document.createElement('script');
			// script.type = 'text/javascript';
			// script.src = '../../auth.js';
			// script.src='https://cdn-web-sg.botim.me/upd/v1/mp/package/framework/35.0.0/framework.universal-35.0.0.js';
			// script.src = 'https://cdn-web-sg.botim.me/upd/v1/mp/package/framework/30.0.0/framework.universal-30.0.0.js';
			// document.body.appendChild(script);


			console.log("--------------------------------")
			console.log(document.body)
			console.log('--------------------------------')
			
			const userInfo = $cookies.get('user');
			console.log("===userInfo===",userInfo)
			if(userInfo.email != null) {
				this.email = userInfo.email;
			}
			
			this.firstName = userInfo.firstName;
			this.lastName = userInfo.lastName;
			if(userInfo.phone != null) {
				this.phone = userInfo.phone['phone'];
			}
			
			if(userInfo.avatar != null) {
				this.avatar = userInfo.avatar;
			}
			
			if(userInfo.ucenterid != null) {
				this.ucenterid = userInfo.ucenterid;
			}
			
			if (/android/i.test(navigator.userAgent)) {
			    console.log("当前为安卓手机");
			} else if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent)) { // 判断IOS平台
			    console.log("当前为苹果手机");
			} else {
			    console.log("其他平台");
			}
		},
		methods: {
			myLogin() {
				//login()
				const user = $cookies.get('user');
				console.log("===usexxxxxr===",user)
				const contaner = document.querySelector('.user_money_info3');
				console.log("===myLogin user===")
				console.log(user)
				console.log(contaner)
				console.log("================")
				contaner.innerHTML = '';
				for (const [key, value] of Object.entries(user)) {
					const div = document.createElement('div');
					div.classList.add('use-item')
					div.innerHTML = `
				      <span>${key}:</span>
				      <span>${JSON.stringify(value)}</span>
				    `;
					contaner.appendChild(div);
				}
			},
			language:function() {
				showToast("暂未开放")
			}
		},
	}
</script>

<style scoped>
	.me_containers {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		/* 允许flex容器换行 */
		justify-content: space-between;
		/* 均匀分布在容器中 */
		/* 设置主轴方向为行 */
	}


	.me_container {
		/* flex: 1 0 calc(50% - 10px); */
		flex: 1;
		/* 设置具体的宽度，也可以调整这个值 */
		margin: 10px;
		padding: 20px;
		border: 1px solid #ccc;
		text-align: center;
		overflow: hidden;
		/* 可以通过隐藏超出的部分来处理 */
		box-sizing: border-box;
		/* 保持 padding 不会撑大容器 */
	}

	.me_container2 {
		position: relative;
		/* flex: 1 0 calc(50% - 10px); */
		flex: 3;
		height: 50vh;
	}

	/* 	.section2 user_head_icon {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 10vh;
	} */

	.user_head_icon {
		position: relative;
		top: 1vh;
		left: 3vw;
		width: 6rem;
		height: 6rem;
		align-items: center;
		/* 图片最大宽度 */
		/* 		height: 50vw; */
		/* 图片最大高度 */
	}

	.user_add_icon {
		position: relative;
		top: 1rem;
		left: 0.2rem;
		width: 2rem;
		/* 图片最大宽度 */
		height: 2rem;
		/* 图片最大高度 */
	}

	.user_desc {
		position: relative;
		text-align: center;
		/* font-size: 7.5rem; */
		top: 1rem;
		font-size: 1.5rem;
		font-family: 'PingFang SC';
		color: black;
		/* 		  src: url('path/to/PingFang-SC-Bold.woff2') format('woff2'),
		       url('path/to/PingFang-SC-Bold.woff') format('woff'); */
		font-weight: bold;
		font-style: normal;
	}

	.user_email {
		position: relative;
		top: 0.8rem;
		text-align: center;
		font-size: 0.75rem;
		font-family: ''PingFang SC'';
		color: black;
	}

	.user_money_infos {
		background-color: white;
		border-radius: 2rem;
		margin-left: 3rem;
		height: 4rem;
		width: 70vw;
	}

	.user_money_info {
		position: relative;
		top: 0.5rem;
		text-align: left;
		left: 1rem;
	}

	.user_money_info_text1 {
		font-size: 0.9rem;
	}

	.user_money_info_btn {
		position: relative;
		font-family: 'PingFang SC';
		top: -3rem;
		left: 5rem;
		width: 5rem;
		height: 2.5rem;
		font-size: 1rem;
		/* background-color: #417bf8; */
		/* position: relative; */
		/* text-align: right; */
		/* margin: 10px; */
		/* right: 10.25rem; */
		/* 	top:-5.625rem;
		 */
		/* margin-right: -1000px; */
		/* position: absolute; */

	}


	.container-item {
		text-align: left;
		/* padding-left: 20px; */
		/* 在左侧添加 20px 的填充 */
		height: 8vh;
	}

	.purchased-icon {
		background: url('../../assets/purchased.png') no-repeat center center;
		background-size: contain;
		width: 2rem;
		/* 图标宽度 */
		height: 2rem;
		/* 图标高度 */
		display: inline-block;
		margin: 0 1rem 0px 1rem;
	}

	.language-icon {
		background: url('../../assets/language.png') no-repeat center center;
		background-size: cover;
		width: 1.8rem;
		/* 图标宽度 */
		height: 1.8rem;
		/* 图标高度 */
		display: inline-block;
		margin: 0 1rem 0px 1rem;
	}

	.mine_headicon {
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
	}

	.me_container2_item {
		margin-top: 1rem;
		text-align: left;
		font-size: 1.2rem;
		font-family: 'PingFang SC';
	}

	.address-icon {
		background: url('../../assets/address.png') no-repeat center center;
		background-size:contain;
		width: 1.8rem;
		/* 图标宽度 */
		height: 1.8rem;
		/* 图标高度 */
		display: inline-block;
		margin: 0 1rem 0px 1rem;
	}

	.me_container3_item {
		margin-top: 1rem;
		text-align: left;
		font-size: 1.2rem;
		font-family: 'PingFang SC';
	}
	.van-toast__text {
	  font-size: 1.5rem;
	}
	.van-toast {
	  width: 80vw; /* 自定义宽度 */
	   height:10vh;
	}
</style>
